<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*,body{
				margin: 0;
				padding: 0;
			}
			.wrap{
				position: absolute;
				left: 30px;
				top: 30px;
				bottom: 30px;
				right: 30px;
				border: 1px solid #eee;
			}
			.drag{
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: #00BFFF;
			}
			.drag:nth-child(even){
				background-color: #007AFF;
			}
			.handle{
				background-color: #66B1F1;
			}
			.drag2{
				top: 100px;
			}
			.drag3{
				top: 200px;
			}
			.drag4{
				top: 300px;
			}
			.container{
				position: absolute;
				left: 100px;
				top: 400px;
				width: 300px;
				height: 200px;
				background-color: #eee;
			}
			.drag5{
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="drag drag1" style="left: 10px;top:30px">drag</div>
			<div class="drag drag2">drag axis x</div>
			<div class="drag drag3">drag grid</div>
			<div class="drag drag4">
				<div class="handle">move handle</div>
			</div>
			<div class="container">
				<div class="drag drag5" style="top:50px">drag limit</div>
			</div>
			<div style="background-color: #228B22;width: 200px;height: 200px;margin-left:200px">
				<div class="drag drag6">drag limit</div>
			</div>
		</div>
		<script src="lib/event.js"></script>
		<script src="lib/drag.js"></script>
		<script type="text/javascript">
			var drag1 = new Drag('.drag1')
			var drag2 = new Drag('.drag2',{axis:'x'})
			var drag3 = new Drag('.drag3',{grid:40})
			var drag4 = new Drag('.drag4',{handle:'.handle'})
			var drag5 = new Drag('.drag5',{containment:true})
			var drag6 = new Drag('.drag6',{axis:'x',grid:40,containment:document.querySelector('.wrap')})
			drag6.on('dragStart',(drag,ev)=>{
				console.log(drag);
			})
			drag6.on('dragMove',(drag,ev,move)=>{
				console.log('dragMove',move.x,move.y);
			})
			drag6.on('dragEnd',(drag,ev,move)=>{
				console.log('dragEnd',move.x,move.y);
			})
			// 让容器里的元素都能拖拽
			// var drag = document.querySelectorAll('.drag')
			// var dragList = []
			// drag.forEach(function(DOM){
			// 	var dragEl =  new Drag(DOM)
			// 	dragList.push(dragEl)
			// })
		</script>
	</body>
</html>
